<template>
  <div>
    <form action="/">
      <van-search
        ref="searchRef"
        v-model="listQuery.code"
        show-action
        placeholder="请输入姓名"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="item in users"
        :key="item.id"
        :title="item.name || item.nickname"
        :value="item.car_number"
        :label="item.telephone||item.phone"
      ></van-cell>
    </van-list>
  </div>
</template>

<script>
import { getGroupsEmployees } from "@/api/groups";

export default {
  name: "Employees",
  components: {
    // NavBar,
  },
  props: ["groups_id"],
  computed: {},
  data() {
    return {
      title: this.$route.meta.title,
      users: [],

      loading: false,
      finished: false,

      listQuery: {
        page: 1,
        page_size: 20,
        groups_id: this.groups_id,
        name: null,
      },
    };
  },
  mounted() {},
  methods: {
    onLoad() {
      this.getGroupsEmployeeList();
    },
    getGroupsEmployeeList() {
      getGroupsEmployees(this.listQuery)
        .then((res) => {
          if (res.data.results.length === 0) {
            this.users = []; // 清空数组
            this.finished = true; // 停止加载
          }

          this.listQuery.page = res.data.page;
          this.users.push(...res.data.results);
          this.loading = false;

          if (this.users.length >= res.data.count) {
            this.finished = true; // 结束加载状态
          }
          console.log(this.users);
        })
        .catch((error) => {
          this.$notify({ type: "danger", message: "读取员工信息失败" + error });
          if (error.response) {
            // this.$notify({ type: "danger", message: "读取商品失败" + error });
          }
        });
    },

    onSearch(val) {
      this.listQuery.page = 1;
      this.listQuery.name = val;
      this.users = [];
      this.getGroupsEmployeeList();
    },

    onCancel() {
      this.listQuery.name = null;
    },
  },
};
</script>

<style>
</style>